<template>
  <div id="grant">
    <div v-if="loading">
      <div class="grant-icon">
        <div class="icon-img">
          <img src="../../assets/img/quanxian.png" width="80" />
        </div>
      </div>
      <div class="grant-tip">
        <p style="color: #333;">本服务需要获得以下权限</p>
        <div class="grant-tip-item">
          <p class="item-point"></p>
          <p class="item-title">读取您的个人信息</p>
        </div>
      </div>
      <div @click="grant" class="grant-btn">
        <p>同意授权</p>
      </div>
    </div>
    <div v-else class="grant-load">
      <van-loading
        type="spinner"
        size="42px"
        text-size="13px;"
        vertical
        >加载中...</van-loading
      >
    </div>
  </div>
</template>

<script>
import { thirdLogin } from "../../apis";
import * as types from "../../store/mutation-types";
export default {
  data() {
    return {
      url: "",
      params: {},
      loading: false
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    getParams() {
      let uri = location.href;
      if (uri.indexOf("#/") !== -1 && uri.indexOf("/#/") === -1) {
        let inner = location.href.split("?");
        uri = inner[0] + "#/?" + inner[1].substring(0, inner[1].length - 2);
        this.url = uri;
      } else {
        this.url = uri;
      }
      if (localStorage.getItem("token") && this.modelFunctions.checkDate()) {
        this.loading = false;
        this.getCards();
      } else {
        this.loading = true;
        this.params = this.modelFunctions.urlParam(uri);
      }
      // this.loading = true;
      // this.params = this.modelFunctions.urlParam(uri);
    },
    async grant() {
      let id_secret = await this.api.obtainId({ state: this.params.state });
      if (id_secret.clientId && id_secret.clientSecret) {
        this.getToken(id_secret, this.params);
      }
    },
    getToken(data, code_state) {
      this.$store.commit(types.REMOVE_ALL);
      this.loading = true;
      let params = {
        grant_type: "password",
        client_id: data.clientId,
        client_secret: data.clientSecret,
        username: code_state.code,
        password: code_state.state,
        scope: "baseInfo",
        source: "host"
      };
      this.api.getToken(params).then(res => {
          localStorage.setItem("expire_in", new Date().getTime());
          localStorage.setItem("token", res.access_token);
          this.getCards();
        })
        .catch(err => {
          this.log("[登录]", err);
          this.$notify({ type: "danger", message: err.message });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getCards() {
      this.api.getCard().then(res => {
        if (this.modelFunctions.httpTip(res)) {
          this.$store.dispatch("cards", res.data);
          let url = this.url.split("?")[0];
          // location.href = url + "check";
          window.location.replace(url + "check");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#grant {
  .grant-load {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
  }
  .grant-icon {
    margin: 40px auto;
    width: 90px;
    text-align: center;

    .icon-img {
      border: 1px solid #f1f1f1;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      position: relative;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .grant-tip {
    width: 260px;
    margin: 60px auto 0 auto;
    font-size: 13px;
    .grant-tip-item {
      color: #8a8a8a;
      padding-top: 18px;
      display: flex;
      align-items: center;
      .item-point {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #0e932e;
      }
      .item-title {
        margin-left: 8px;
      }
    }
  }

  .grant-btn {
    width: 260px;
    margin: 75px auto 10px auto;
    background: #4663ff;
    border-radius: 5px;

    p {
      font-size: 14px;
      color: #fff;
      text-align: center;
      padding: 8px 0;
    }
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
